<template>
	<view class="wrap">
		<view class="item" v-for="item in recommend" :key="item._id" @click="detail(item._id)">
			<image :src="item.coverpic"></image>
			<view class="item_title">{{item.name}}</view>
			<view class="item_content">
				<view>
					<text>{{item.pageview}}</text>
					<u-icon name="eye-fill" size="24"></u-icon>
				</view>
				<view>
					<text>{{item.collections}}</text>
					<u-icon name="qzone" size="24"></u-icon>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "recommend",
		data() {
			return {
				recommend: []
			};
		},
		methods: {
			async getRecommend() {
				const data = await this.$api.home.getRecommend();
				if (data.meta.status == 200) {
					this.recommend = data.message;
				}
			},
			detail(id){
				uni.navigateTo({
					url: `/pages/menuDetail/menuDetail?id=${id}`
				})
			}
		},
		created() {
			this.getRecommend();
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.item {
			margin-bottom: 20rpx;

			>image {
				width: 310rpx;
				height: 280rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.item_title {
				font-size: 30rpx;
				font-weight: 600;
				color: #303030;
			}

			.item_content {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #C0C0C0;
				>view{
					flex-grow: 1;
					>text{
						margin: 10rpx;
					}
				}
			}
		}

	}
</style>
